<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的帖子</title>
    <link rel="stylesheet" href="/static/css/bulma.min.css" th:href="@{/css/bulma.min.css}">
    <link rel="stylesheet" href="/static/css/community.css" th:href="@{/css/community.css}">
    <link rel="stylesheet" href="/css/msg.css" th:href="@{/css/msg.css}">
    <link rel="stylesheet" href="/static/css/switch.css" th:href="@{/css/switch.css}">
    <link rel="stylesheet" href="/static/css/notice.css" th:href="@{/css/notice.css}">
    <script type="text/javascript" src="/static/js/jquery-3.7.1.min.js" th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" src="/static/js/awesome.js" th:src="@{/js/awesome.js}"></script>
    <script type="text/javascript" src="/static/js/community.js" th:src="@{/js/community.js}"></script>
    <script type="text/javascript" src="/js/msg.js" th:src="@{/js/msg.js}"></script>
    <script type="text/javascript" src="/static/js/notice.js" th:src="@{/js/notice.js}"></script>
</head>
<body class="has-navbar-fixed-top">
<!-- 导航栏内容 -->
<div th:replace="~{common/nav::nav(current=1,size=10,keyword='')}"></div>
<!-- 中间部分内容 -->
<section class="section">
    <!-- 错误提示飘窗 -->
    <div id="toast" class="notification is-danger">
        错误信息：操作失败，请稍后再试。
    </div>
    <div id="success-toast" class="notification is-info">
        操作成功
    </div>
    <div class="container is-max-widescreen ">
        <div class="columns is-desktop index-top">
            <div class="column column-item">
                <div class="card index-card-border">
                    <header class="card-header-title article-card-header level">
                        <span class="level-left">
                            <span class="level-item ">
                                我的帖子
                            </span>
                        </span>
                        <span class="level-right ">
                            <a href="#" th:href="@{/article/add-article}" class="button is-rounded is-outlined is-dark level-item">
                                <i class="fa-solid fa-newspaper"></i> &nbsp;
                                添加文章
                            </a>
                        </span>
                    </header>
                    <div class="divider"></div>
                    <div class="card-content">
                        <form th:action="@{/article/search}" action="/search" method="get">
                            <!-- <div>
                                 <input class="input" type="text" placeholder="输入关键词" />
                                 <button type="submit" class="button is-active">搜索</button>
                             </div>-->
                            <div style="display: flex; align-items: center;">
                                <input type="hidden" name="current" th:value="${page.current}">
                                <input type="hidden" name="size" th:value="${page.size}">
                                <input class="input" name="keyword" type="text" th:value="${keyword}" placeholder="输入 关键词 / ID 搜索..." style="width: 300px; margin-right: 5px;">
                                <button type="submit" class="button is-dark">搜索</button>
                            </div>

                            <div class="divider"></div>

                            <div class="table-container" style="white-space: nowrap;">
                                <table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth is-auto-fill">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>标题</th>
                                        <th>首图</th>
                                        <th>浏览量</th>
                                        <th>点赞量</th>
                                        <th>分享量</th>
                                        <th>分享</th>
                                        <th>评论</th>
                                        <th>赞赏</th>
                                        <th>推荐</th>
                                        <th>标签</th>
                                        <th>创建时间</th>
                                        <th>更新时间</th>
                                        <th>编辑</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <!-- 表格内容 -->

                                    <tr th:each="item: ${page.getData()}">
                                        <td class="tooltip-container">
                                            <span class="text-ellipsis" th:data-full-text="${item.id}">
                                                [[${item.getId()}]]
                                            </span>
                                        </td>
                                        <td class="tooltip-container">
                                            <span class="text-ellipsis" th:data-full-text="${item.getTitle()}">
                                            [[${item.getTitle()}]]
                                           </span>
                                        </td>
                                        <td>
                                            <img th:if="${item.getFirstPicture()!=null&&item.getFirstPicture()!=''}" th:src="${item.getFirstPicture()}" width="100px" height="100px" src="https://community-sloan.oss-cn-shanghai.aliyuncs.com/article/images/2024/11/25/76345304-873b-4bf3-9cca-e00400619f06.png" alt="首图">
                                        </td>
                                        <td>[[${item.getView()}]]</td>
                                        <td>[[${item.getLikeCount()}]]</td>
                                        <td>[[${item.getShareCount()}]]</td>
                                        <td>
                                            <label class="switch">
                                                <input type="checkbox" th:data-id="${item.id}" th:data-type="share" th:checked="${item.shareable}" >
                                                <span></span>
                                            </label>
                                        </td>
                                        <td>
                                            <label class="switch">
                                                <input type="checkbox" th:data-id="${item.id}" th:data-type="comment" th:checked="${item.commentable}" >
                                                <span></span>
                                            </label>
                                        </td>
                                        <td>
                                            <label class="switch">
                                                <input type="checkbox" th:data-id="${item.id}" th:data-type="appreciation" th:checked="${item.appreciation}" >
                                                <span></span>
                                            </label>
                                        </td>
                                        <td>
                                            <label class="switch">
                                                <input type="checkbox" th:data-id="${item.id}" th:data-type="recommend" th:checked="${item.recommend}" >
                                                <span></span>
                                            </label>
                                        </td>
                                        <td style="white-space: nowrap;">
                                            <div class="tags">
                                                <span th:each="tag:${item.getTags()}" class="tag is-link is-light" th:text="${tag}"></span>
                                            </div>
                                        </td>
                                        <td class="td-time-item" th:text="${#temporals.format(item.createdTime,'yyyy/MM/dd HH:mm')}">2024/12/9 11:33</td>
                                        <td class="td-time-item" th:text="${#temporals.format(item.updatedTime,'yyyy/MM/dd HH:mm')}">2024/12/9 11:33</td>
                                        <td>
                                            <span th:onclick="'edit('+${item.getId()}+')'" class="button is-info  is-small">编辑</span>
                                            <span th:onclick="'del('+${item.getId()}+')'" class="button is-danger is-small">删除</span>
                                        </td>
                                    </tr>

                                    <!-- 其他表格行 -->
                                    </tbody>
                                    <tfoot>

                                    </tfoot>
                                </table>
                            </div>

                            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
                                <a class="pagination-previous"
                                   th:if="${page.getHasPrePage()}"
                                   th:href="@{'/article/search?current='+${page.getPrePage()}+'&size='+${page.getSize()}+${keyword==null?'':'&keyword='+keyword}}">上一页</a>
                                <a class="pagination-next"
                                   th:if="${page.getHasNextPage()}"
                                   th:href="@{'/article/search?current='+${page.getNextPage()}+'&size='+${page.getSize()}+${keyword==null?'':'&keyword='+keyword}}">下一页</a>
                                <ul class="pagination-list">
                                    <li th:each="num:${page.nums}">
                                        <a class="pagination-link is-current" th:class="${page.current.equals(num)?'pagination-link is-current':'pagination-link'}"  th:href="@{'/article/search?current='+${num}+'&size='+${page.getSize()}+${keyword==null?'':'&keyword='+keyword}}" aria-label="Goto page 1" th:text="${num}">1</a>
                                    </li>
                                </ul>
                            </nav>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 底部部分内容 -->
<div th:replace="~{common/footer::footer}"></div>

</body>
<script type="application/javascript">
    $('table').on('change', 'input[type="checkbox"]', function () {
        const isChecked = $(this).is(':checked');  // 当前 switch 的状态
        const itemId = $(this).data('id');        // 获取数据ID（每个 item 的唯一标识）
        const switchType = $(this).data('type');  // 获取 switch 类型（commentable 或 likeable）

        var url=`/article/status/${switchType}/${itemId}`

        console.log("url:"+url)
        $.ajax({
            url: url,
            method: 'PUT',
            success: function (data) {
               if(data.code===200){
                   showSuccessToast()
               }else {
                   showErrorToast(data.msg);
               }
            },
            error: function (error) {
                console.error('Error updating switch:', error);
            }
        });
    });
</script>

</html>